<template>
  <div class="aside-menu">
    <a-menu
      id="dddddd"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      style="width: 256px"
      mode="inline"
      :items="items"
      @click="handleClick"
    ></a-menu>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, VueElement, h, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { ItemType } from 'ant-design-vue'
import Health from './icon/Health.vue'
import Drugs from './icon/Drugs.vue'
import Community from './icon/Community.vue'
import Home from './icon/Home.vue'
import User from './icon/User.vue'
import News from './icon/News.vue'
import { doctorOperate, Operate, adminOperate } from './permission'
import { userUserStore } from '@/stores/UserStore'
const store = userUserStore()
const userInfo: any = ref({})
const selectedKeys = ref<string[]>(['sub1'])
const openKeys = ref<string[]>(['sub1'])
function getItem(
  label: VueElement | string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group'
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType
}
const router = useRouter()
const route = useRoute()
const items = ref([
  getItem('首页', 'sub1', () => h(Home)),
  getItem('社区管理', 'sub2', () => h(Community), [getItem('社区列表', '201')]),
  getItem('论坛管理', 'sub3', () => h(News), [
    getItem('帖子管理', '301'),
    getItem('评论管理', '302'),
  ]),
  getItem('药品管理', 'sub4', () => h(Drugs), [
    getItem('药品列表', '401'),
    getItem('药品库管理', '402'),
  ]),
  getItem('医疗服务', 'sub5', () => h(Health), [
    getItem('服务管理', '501'),
    getItem('就诊服务', '502'),
  ]),
  getItem('用户管理', 'sub6', () => h(User), [
    getItem('用户列表', '601'),
    getItem('医生排班', '602'),
  ]),
])
const handleClick = (e: any) => {
  switch (e.key) {
    case 'sub1':
      router.push('/Manage/Home')
      break
    case '201':
      router.push('/Manage/Community')
      break
    case '301':
      router.push('/Manage/Forum')
      break
    case '302':
      router.push('/Manage/Notice')
      break
    case '401':
      router.push('/Manage/Drugs')
      break
    case '402':
      router.push('/Manage/DrugLibrary')
      break
    case '501':
      router.push('/Manage/Reservation')
      break
    case '502':
      router.push('/Manage/Consultation')
      break
    case '601':
      router.push('/Manage/userList')
      break
    case '602':
      router.push('/Manage/Scheduling')
      break

    default:
      return
  }
}

const isSwitch = () => {
  switch (route.path) {
    case '/Manage/Community':
      selectedKeys.value = ['201']
      break
    case '/Manage/Forum':
      selectedKeys.value = ['301']
      break
    case '/Manage/Notice':
      selectedKeys.value = ['302']
      break
    case '/Manage/Drugs':
      selectedKeys.value = ['401']
      break
    case '/Manage/DrugLibrary':
      selectedKeys.value = ['402']
      break
    case '/Manage/Reservation':
      selectedKeys.value = ['501']
      break
    case '/Manage/Consultation':
      selectedKeys.value = ['502']
      break
    case '/Manage/userList':
      selectedKeys.value = ['601']
      break
    case '/Manage/userList':
      selectedKeys.value = ['601']
      break

    case '/Manage/Scheduling':
      selectedKeys.value = ['602']
      break

    default:
      return
  }
}
// watch(openKeys, (val) => {
//   console.log('openKeys', val)
// })

onMounted(() => {
  isSwitch()
  // 判断登录进来的是什么身份
  userInfo.value = JSON.parse(localStorage.getItem('employeeInfo') || '')
  if (userInfo.value.empId == 0) {
    items.value = adminOperate
  } else if (userInfo.value.empId != 0 && userInfo.value.type == 1) {
    items.value = Operate
  } else {
    items.value = doctorOperate
  }
})
</script>

<style lang="scss" scoped>
.aside-menu {
  width: 256px;
  height: 100vh;
  background: #fff;
}
::v-deep(.ant-menu-item-selected) {
  color: #f5b017 !important;
  background: rgba($color: #f5b017, $alpha: 0.2);
}
::v-deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
  color: #f5b017 !important;
}
</style>
